<template>
  <div>
    <div style="margin-bottom:15px">
      <el-button
        slot="addOrder"
        style="background: rgb(7, 131, 241);color: #fff"
        @click="$router.push('addexapply')"
      >
      样品申请
      </el-button>
    </div>
    <div class="searchArea flex">
      <el-form ref="serachForm"
               :model="searchForm"
               :inline="true"
               style="width:98%"
               label-position="left"
               label-width="90px">
 
         <el-form-item label="编号" prop="code" style="width:30%" >
          <el-input v-model="searchForm.recordNum" placeholder="请输入编号"  ></el-input>
                    <!--:disabled="isDisabled"-->
        </el-form-item>


        <el-form-item prop="searchForm" label="状态:">
          <el-select v-model="searchForm.status" filterable placeholder="请选择" >
            <el-option
                    v-for="item in categroyList"
                    :label="item.cateName"
                    :value="item.id"
                    :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>


        <el-form-item prop="action" >
          <el-button type='primary'
                     @click="searchSubmit">搜索</el-button>
          <el-button type="primary"
                     style="margin:0,15px"
                     @click="dialogDetailFormVisible=true">导出</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="applicationList">
      <el-table :data="tableData" style="width: 100%" height="500" stripe>
        <el-table-column prop="recordNum" label="免费样品订单编号" align="center"></el-table-column>
         <el-table-column prop="from" label="来源类别" align="center"></el-table-column>
        <el-table-column prop="askAccount" label="申请账户" align="center"></el-table-column>
        <el-table-column prop="createTime" label="申请时间" align="center">
          <template slot-scope="scope">
            <label>{{scope.row.createTime  | formatDate}}</label>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态"  align="center"></el-table-column>
        <el-table-column label="操作"  align="center" fixed="right" width="180">
            <template slot-scope="scope" >
              <el-button type="primary"  size="mini" @click="detail(scope.row)">详情</el-button>
              <el-button type="primary"  size="mini" v-if="scope.row.changeDeliveryFlag == 1" @click="sendStyle(scope.row)">发货方式</el-button>
              <!--:disabled="scope.row.status!=0"-->
             </template>
          </el-table-column>-->
      </el-table>
      <el-pagination
        style="text-align:right;margin-top:20px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>

    <!--发货方式-->
    <el-dialog  class="sendstyle" title="发货方式" :visible.sync="sendStyles_show">
      <el-form :model="sendStyles">
      <el-form-item label="发货方式">
        <el-radio-group v-model="sendStyles.deliverySide">
          <el-radio  label="2">制造商直出</el-radio>
          <el-radio  label="1">鸿芯优电上海仓</el-radio>
        </el-radio-group>
      </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="sendStyles_show = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="gosendStyle">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 导出 -->
    <el-dialog title="导出" :visible.sync="dialogDetailFormVisible">
      <el-form :model="downLoadForm">


        <el-form-item label="创建时间">
                        <!--prop="timeRange">-->
            <el-date-picker v-model="timeRange"
                            clearable
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"></el-date-picker>
          </el-form-item>

        <el-form-item prop="searchForm" label="状态" style="margin-left:23px">
          <el-select v-model="searchForm.status" filterable placeholder="请选择">
            <el-option
                    v-for="item in categroyList"
                    :label="item.cateName"
                    :value="item.id"
                    :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogDetailFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="daochu">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { SAMPLE_MY_LIST,BELONGMENULIST,download1,currentUser,applyr,SENDSTYLE } from '@/utils/api';
import search from "@/components/search.vue";
import { formatDate } from '@/utils/validate.js';
import { Message } from "element-ui";
export default {
  components: { search },
  data() {
    return {
        style:'',
        sendStyles_show : false,
        sendStyles:{
        	deliverySide:1
        },
        categroyList: [
            {id:'0,1,2,4',cateName:"全部"},
            {id:'1,4',cateName:"已审批"},
            {id:2,cateName:"已婉拒"},
            {id:0,cateName:"待审批"}
        ],
        shopType:[

            {value:1,text:"已提交审核 "},
            {value:2,text:"待发货"},
            {value:3,text:"已婉拒"},
            {value:4,text:"已发货完成"}
        ],
        timeRange:'',
      downLoadForm:{},
      dialogDetailFormVisible:false,
      searchForm: {
        customerName: "",
        materialNo: "",
        applicant: "",
        timeRange: [],
        status: "",
        statusList:false
      },
      tableData: [
        
      ],
      downloadUrl:"https://yzbban.oss-cn-shanghai.aliyuncs.com/",
      currentPage: 1,
      pageSize: 10,
      total: 50,
        range:1,
        recordmainId:0
    };
  },
  created(){
      this.belongMenuMainList()
    // this.getSampleMyList()
  },
  filters: {
    formatDate(time) {
        var date = new Date(time*1000);
        return formatDate(date, 'yyyy-MM-dd hh:mm:ss');
    }
  },
  methods: {
 
      daochu(){
          console.log(this.searchForm.status)
          download1({
              statusList: this.searchForm.status,
//            from:0,
              range: 1,
              startTime: new Date(this.timeRange[0]).getTime()/1000,
              endTime:new Date(this.timeRange[1]).getTime()/1000,
          }).then(res => {
              console.log(res.data)
              var url = this.downloadUrl + res.data;
              location.href = url;
          })
      },
      belongMenuMainList(){
          let token = sessionStorage.getItem('op-token')
          console.log(token)
          BELONGMENULIST({
              pageNo: this.currentPage,
              pageSize: this.pageSize,
              range:this.range,
              from:0
          }).then(res => {
              this.tableData=res.data.dataList
              let datacount = res.data.count
              this.total = res.data.count
              let i = 0;
              for (i = 0; i < datacount; i++) {

                  if(this.tableData[i].from  == 0){
                      this.tableData[i].from ='aml'
                  }
                  if(this.tableData[i].from  == 1){
                      console.log(987)
                      this.tableData[i].from ='商城申请 '
                  }

                  this.tableData[i].oldstatus = this.tableData[i].status
                  if(this.tableData[i].status == 0){
                      this.tableData[i].status ='已提交审核'
                  }
                  if(this.tableData[i].status == 1){
                      this.tableData[i].status ='已审核'
                  }
                  if(this.tableData[i].status == 2){
                      this.tableData[i].status ='已婉拒'
                  }
                  if(this.tableData[i].status == 3){
                      this.tableData[i].status ='待发货'
                  }
                  if(this.tableData[i].status == 4){
                      this.tableData[i].status ='待收货'
                  }
                  if(this.tableData[i].status == 5){
                      this.tableData[i].status ='待评价 '
                  }
              }
          })
      },

      searchSubmit(){
          let token = sessionStorage.getItem('op-token')

          BELONGMENULIST({
              pageNo: this.currentPage,
              pageSize: this.pageSize,
              range:this.range,
              recordNum:this.searchForm.recordNum,
              statusList:this.searchForm.status,
          }).then(res => {
              this.tableData=res.data.dataList
              let datacount = res.data.count
              let i = 0;
              for (i = 0; i < datacount; i++) {

                  if(this.tableData[i].from  == 0){
                      this.tableData[i].from ='aml'
                  }
                  if(this.tableData[i].from  == 1){
                      console.log(987)
                      this.tableData[i].from ='商城申请 '
                  }


                  if(this.tableData[i].status == 0){
                      this.tableData[i].status ='已提交审核，原厂审核中'
                  }
                  if(this.tableData[i].status == 1){
                      this.tableData[i].status ='已审核'
                  }
                  if(this.tableData[i].status == 2){
                      this.tableData[i].status ='已婉拒'
                  }
                  if(this.tableData[i].status == 3){
                      this.tableData[i].status ='待发货'
                  }
                  if(this.tableData[i].status == 4){
                      this.tableData[i].status ='待收货'
                  }
                  if(this.tableData[i].status == 5){
                      this.tableData[i].status ='待评价 '
                  }
              }
          })
      },
    detail(row){
      console.log("list-data",row)

      this.$router.push({
        path: "exorderDetail",
        query: {
          data: row,
          handler: "check"
        }
      });
    },
    //发货方式
    sendStyle(row){
      this.sendStyles_show  = true
      this.recordmainId = row.id
      this.style = row.deliverySide
       
      if(this.style == 1){
         this.sendStyles.deliverySide = "1"
      }else if(this.style == 2) {
         this.sendStyles.deliverySide = "2"
      }
    
  
    },
    //提交发货方式
    gosendStyle(){

      SENDSTYLE({
              deliverySide: this.sendStyles.deliverySide,
              recordmainId: this.recordmainId,
          }).then(res => {
                 Message.success({ message: "提交成功" });
                 this.sendStyles_show  = false
                 
                    this.belongMenuMainList()
      
              //var url = this.downloadUrl + res.data;
              //location.href = url;
          })

       console.log(this.sendStyles)
    },
    search() {},
    // getSampleMyList(){
    //   console.log('==getSampleMyList==>')
    //   SAMPLE_MY_LIST({
    //       pageNo: this.currentPage,
    //       pageSize: this.pageSize
    //   }).then(res => {
    //       this.loading = false
    //       this.tableData = res.data.dataList
    //       this.total = res.data.count
    //   })
    // },
    // 订单状态格式化
    formatStatus(row, column) {
      var status = row[column.property]
      switch(status) {
        case 0: return '审核中'
        case 1: return '待发货'
        case 2: return '拒绝提供'
        case 3: return '已发货'
        case 4: return '已到货'
        default: return '未知'
      }
    },
    checkTransport(row, index) {
      this.$router.push('transportation')
    },
    modifyOrder(row, index) {
      this.$router.push({
        name: "handleOrder",
        params: {
          orderIndo: row
        }
      });
    },
    handleSizeChange(val) {
       console.log(`每页 ${val} 条`);
        this.pageSize=val
        this.belongMenuMainList()
     
    },
    handleCurrentChange(val) {
     // console.log(`当前页: ${val}`);
        console.log(val)
        this.currentPage=val
        this.belongMenuMainList()
    }
  }
};
</script>

<style lang="scss">
.applicationList {
  width: 100%;
  background: #fff;
  padding: 20px 2px;
  border-radius: 5px;
  box-shadow: 2px 3px 15px 0 #ccc;
}
	.searchArea {
		width: 100%;
		margin-top: 15px;
		justify-content: flex-start;
	}
  .sendstyle{
    width: 800px;
    margin: 0 auto;
    
  }
  .sendstyle .el-dialog__header{
    border-bottom:1px solid #dcdfe6;
  }
  .sendstyle .el-dialog__footer{
    border-top:1px solid #dcdfe6;
    height: 50px;
  }
</style>